<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue生命周期</title>
    <script src="Vue.js"></script>
</head>

<body>
    <div ref='app' id="app">{{name}}</div>
    <script>
    let app = new Vue({
        el: "#app",
        data: {
            name: "前端君"
        },
        beforeCreate() {
            console.log('即将创建');
            console.log(this.$data);
            console.log(this.$el);
        },
        created() {
            console.log('创建完毕');
            console.log(this.$data);
            console.log(this.$el);
        },

        beforeMount() {
            console.log('即将挂载');
            console.log(this.$el);
        },
        mounted() {
            console.log('挂载完毕');
            console.log(this.$el);
        },
        beforeUpdate() {
            console.log('=即将更新渲染=');
            let name = this.$refs.app.innerHTML;
            console.log('name:' + name);
        },
        updated() {
            console.log('==更新成功==');
            let name = this.$refs.app.innerHTML;
            console.log('name:' + name);
        },
        beforeDestroy() {
            console.log('销毁之前');
        },
        destroyed() {
            console.log('销毁成功');
        }





    })
    </script>
</body>

</html>